<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>平移效果</title>
		<style>
			.box{
				width: 200px;
				height:200px;
				background-color: #4285f4/* 谷歌蓝 */;
				/* 过渡时间：更丝滑 */
				transition:transfrom 10s ;
			}
			/* 伪类选择器：hover 当鼠标悬停在元素上，完成效果 */
			.box:hover{
				/* 转换属性：平移属性值 X轴向右   Y轴向下*/
				transform:translate(100px,100px);
			}
		</style>
	</head>
	<body>
		<!-- 案例：鼠标移动div上，完成平移效果 -->
		<div class="box"></div>
	</body>
</html>